import React, { useRef, useEffect, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { Radio, Button } from 'antd';
import {
    FileExcelOutlined,
    FileImageOutlined,
    PieChartOutlined,
    BarChartOutlined,
    LineChartOutlined,
} from '@ant-design/icons';
import XLSX from 'xlsx';
import style from '../../DataBoard.css';
import CustomDatePicker from './CustomDatePicker';
import moment from 'moment';
import style2 from './CustomDatePicker.css';
import Loading from '@/components/Loading';


function EERTrend({ chartMaps, item, theme, onDispatch }) {
    const echartsRef = useRef();
    const [chartType, setChartType] = useState('line');
    const [sourceData, setSourceData] = useState({});
    const [loading, setLoading] = useState(false);
    let textColor = '#58586f';
    let seriesData = [], categoryData = [], valueData = [];
    
    useEffect(() => {
        setLoading(true);
        new Promise((resolve, reject) => {
            let date = moment(new Date());
            onDispatch({ type: 'board/fetchEERTrend', payload: { resolve, reject, timeType: '3', startDate:date, endDate:date } })
        })
        .then((data) => {
            setSourceData(data);
            setLoading(false);
        })
    }, []);
    let keys = Object.keys(sourceData);
    if ( keys.length ) {
        keys.forEach(key=>{
            categoryData.push(key);
            valueData.push(sourceData[key].OEE );
        });
        if ( chartType === 'pie' ) {
            let pieData = [
                { name:'EER', itemStyle:{ color:'#7c1ff1' }, value:valueData.reduce((sum, cur)=>{ sum+= cur; return sum  }, 0) },
            ];
            seriesData.push({
                type:'pie',
                data:pieData
            })
        } else {
            seriesData.push({
                type:chartType,
                showSymbol:false,
                barWidth:10,
                name:'EER',
                data:valueData,
                itemStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#7c1ff1', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#3a2ef8', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    }
                },
                areaStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(58, 46, 248, 0.15)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'transparent', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    }
                }
            });
        }
    }   
    return (
        <div className={style['card-container']} style={{ boxShadow: 'none' }}>
            { loading && <Loading /> }
            <div
                className={style['card-container-title']}
                style={{ height: '2rem', borderBottom:'none', lineHeight:'2rem' }}
            >
                <div style={{ display:'flex', alignItems:'center' }}>
                    <span style={{ marginRight: '1rem', color: theme === 'dark' ? '#fff' : '#000' }}>{ chartMaps[item.key] || '' }</span>
                    <CustomDatePicker
                        theme={theme}
                        initTimeType='3'
                        onDispatch={(action)=>{
                            setLoading(true);
                            new Promise((resolve, reject) => {
                                onDispatch({ type: 'board/fetchEERTrend', payload: { resolve, reject, timeType:action.timeType, startDate:action.startDate, endDate:action.endDate } })
                            })
                            .then((data) => {
                                setSourceData(data);
                                setLoading(false);
                            })
                        }}
                    />
                </div>
                <Radio.Group className={style2['custom-radio']} value={chartType} onChange={e=>setChartType(e.target.value)}>
                    <Radio.Button value='bar'><BarChartOutlined style={{ fontSize:'1.2rem', verticalAlign:'middle' }} /></Radio.Button>
                    <Radio.Button value='line'><LineChartOutlined style={{ fontSize:'1.2rem', verticalAlign:'middle' }} /></Radio.Button>
                    <Radio.Button value='pie'><PieChartOutlined style={{ fontSize:'1.2rem', verticalAlign:'middle' }} /></Radio.Button>
                </Radio.Group>
            </div>
            <div
                style={{ width:'100%', height: 'calc( 100% - 2rem)' }}
            >
                <ReactEcharts
                    ref={echartsRef}
                    style={{ height: '100%' }}
                    notMerge={true}
                    option={{
                        tooltip: {
                            trigger: chartType === 'pie' ? 'item' : 'axis',
                        },
                        grid: {
                            top: 40,
                            left: 20,
                            right: 20,
                            bottom: 10,
                            containLabel: true,
                        },
                        xAxis: {
                            show:chartType === 'pie' ? false : true,
                            type: 'category',
                            data:categoryData,
                            silent: false,
                            splitLine: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLabel: {
                                show: true,
                                color: textColor,
                            },
                            axisTick: { show: false },
                            axisLine: { show: true, lineStyle: { color: textColor } },
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: false,
                            },
                            name:'kwh',
                            nameTextStyle:{ color:textColor },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                show: true,
                                lineStyle : { color: theme === 'dark' ? '#313143' : '#f7f7f7' }
                            },
                            axisLabel: {
                                show: true,
                                color: textColor,
                            },
                        },
                        series: seriesData,
                    }}
                />
            </div>
        </div>
    );
}

export default EERTrend;
